<template>
	<view>
		<uni-nav-bar background-color="#e32519" color="#fff" status-bar="true" fixed="true" @clickLeft="clickNavLeft()"
			@clickRight="clickNavRight()">
			<!-- 导航栏左侧插槽 -->
			<view slot="left" style="display: flex;justify-content: space-between;">
				<image style="width: 110rpx;height: 50rpx;" src="../../static/xuexi.png"></image>

			</view>
			<u-search height="50rpx" showAction="false" placeholder="每日科普" placeholderColor="#eceae9" bgColor="#ec857b"
				:animation="true" searchIconColor="#eceae9"></u-search>
			<view slot="right"><text style="font-size: 16px;">我的</text></view>
		</uni-nav-bar>
		<!-- 滚动条 -->
		<u-tabs style="width:100%; background-color: #ffeee6;position:fixed;z-index: 1;" lineColor="red" lineWidth="25"
			lineHeight="2" activeStyle="color:red;" :list="tabList" @click="click"></u-tabs>
		<!-- 判断显示二级滚动条 -->
		<!-- 二级滚动 -->
		<scroll-view scroll-x="true">
			<u-tabs style=" margin-top: 120rpx;text-align: center;" :list="(this.x==1) ? tabList2:tabList3"
				lineWidth="0" scrollable="false" :activeStyle="{
								width:'140rpx',
								height:'60rpx',
     							color: 'white',
								fontWeight: 'bold',
								transform: 'scale(1)',
								background:'red',
								
							}" :inactiveStyle="{
						        width:'140rpx',
								height:'60rpx',
								background:'#efefef',
								color: '#71757a',
								transform: 'scale(1)',
								
							}" itemStyle=" padding-left: 15px; padding-right: 12px;line-height: 30px;">
			</u-tabs>
		</scroll-view>

		<!-- 视频内容 -->
		<view v-for="item in (this.x==1) ? vList1:vList2" @click="toDetailVideo(item.id)" >
			<view style="padding: 10px 0 5% 5%;font-size: 20px;">{{item.title}}</view>
			
			<image style="width: 100%;" :src="item.img"></image>
			<view style="width: 90%;margin-left: 5%; display: flex;justify-content: space-between;color: #a1a1a1;">
				<view>{{item.source}}</view>
				
				<view style="display: flex;"   @tap="change(item.zan,item.flag)">
					<image style="width: 20px;height: 20px;" v-show="showUpImg" @click="zan()" src="../../static/view/zan.png"></image>
					<image style="width: 20px;height: 20px;" v-show="!showUpImg" @click="zan()" src="../../static/view/zan_click.png"></image>
					<view>{{item.zan}}</view>
					<view style="padding-left: 18px;"><image style="width: 20px;height: 20px;"src="../../static/view/share.png"></image></view>
				</view>				
		</view>
	
	</view>



		<!-- 底部自定义导航-->
		<u-tabbar :value="value4" @change="name => value4 = name" :fixed="true" :placeholder="true"
			activeColor="#d81e06" :safeAreaInsetBottom="true">
			<!-- 强国通 -->
			<u-tabbar-item text="强国通" badge="3" @click="go1(text)">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/qgt2.png">
				</image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/qgt.png"></image>
			</u-tabbar-item>
			<!-- 百灵 -->
			<u-tabbar-item text="百灵" @click="go2()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/bl2.png"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/bl.png"></image>
			</u-tabbar-item>
			<!-- 中间图标 -->
			<u-tabbar-item @click="go3()">
				<image style="width: 80rpx;height: 80rpx;" slot="active-icon" src="../../static/tab.png"></image>
				<image style="width: 80rpx;height: 80rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tab_select.png"></image>
			</u-tabbar-item>
			<!-- 电视台 -->
			<u-tabbar-item text="电视台" @click="go4()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/dst2.png">
				</image>
				<image style="width: 40rpx;height:40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/dst.png"></image>
			</u-tabbar-item>
			<!-- 电台 -->
			<u-tabbar-item text="电台" @click="go5()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/dt2.png"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/dt.png"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showUpImg:true,
				x: 1,
				value4: 3,
				tabList: [{
						id: "tab01",
						name: '第一频道'
					},
					{
						id: "tab02",
						name: '学习视频'
					},
					{
						id: "tab03",
						name: '联播频道'
					},
					{
						id: "tab04",
						name: '看电视'
					},
					{
						id: "tab05",
						name: '看理论'
					},
					{
						id: "tab06",
						name: '看党史'
					},
					{
						id: "tab07",
						name: '看教育'
					},
					{
						id: "tab08",
						name: '看幕课'
					},
					{
						id: "tab09",
						name: '看人物'
					},
					{
						id: "tab10",
						name: '看文艺'
					},
					{
						id: "tab11",
						name: '看科技'
					}
				],
				tabList2: [{
						id: "tab201",
						name: '全部活动'
					},
					{
						id: "tab202",
						name: '重要活动'
					},
					{
						id: "tab203",
						name: '重要会议'
					},
					{
						id: "tab204",
						name: '重要讲话'
					},
					{
						id: "tab205",
						name: '重要文章'
					},
					{
						id: "tab206",
						name: '出国访问'
					},
					{
						id: "tab207",
						name: '重要学习'
					},
					{
						id: "tab208",
						name: '指示批示'
					}
				],
				tabList3: [{
						id: "tab201",
						name: '学新视界'
					},
					{
						id: "tab202",
						name: '强军之路'
					},
					{
						id: "tab203",
						name: '绿水青山'
					},
					{
						id: "tab204",
						name: '一带一路'
					},
					{
						id: "tab205",
						name: '初心使命'
					},
					{
						id: "tab206",
						name: '强国建设'
					}
				],

				vList1: [{
						id:"1",
						title: "俄军击毙乌女狙击手",
						source: "百度新闻",
						url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9de17fea-2142-4abf-ac2c-77c7395060eb/90c21252-00a5-444e-bde0-7551c3da9050.mp4",
						img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9de17fea-2142-4abf-ac2c-77c7395060eb/6d1bf961-25c8-4ebc-baf8-866b3117fdb2.jpg",
						detail: "",
						zan: "6",
						flag:"true"

					}
				],
				vList2: [{
						id:"2",
						title: "当苹果遇上磁铁",
						source: "科学快讯",
						url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9de17fea-2142-4abf-ac2c-77c7395060eb/0d744681-0f47-4b39-b369-1cb4a1a6dae7.mp4",
						img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9de17fea-2142-4abf-ac2c-77c7395060eb/ad7a90d8-796f-45b8-ab2c-5b7f46eb5df5.jpg",
						detail: "",
						zan: "3",
						flag:"true"

					},

				]
			}
		},
		methods: {
			toDetailVideo(id){
				console.log(id)
				uni.navigateTo({
					url:"./vDetail?id="+id
				})
				
			},
			// 点赞数量改变
			change(zan,flag){
				console.log(flag)
				var a =eval(zan)
				if(flag){
						this.vList1.forEach((item,index) => {
					this.$set(item,"zan",a+1)
					this.$set(item,"flag",false)
					
				}
				)
				this.vList2.forEach((item,index) => {
					this.$set(item,"zan",a+1)
					this.$set(item,"flag",false)
					
				}
				)
				}
				else{
					this.vList1.forEach((item,index) => {
						this.$set(item,"zan",a-1)
						this.$set(item,"flag",true)
					})
					this.vList2.forEach((item,index) => {
						this.$set(item,"zan",a-1)
						this.$set(item,"flag",true)
					})
				}
				
			},
			zan(){
				this.showUpImg=!this.showUpImg
				
				
				
						
			},
			click(e) {
				if (e.id == "tab02") {
					this.x = 2
				} else {
					this.x = 1
				}
				console.log(this.x)
			},
			go1() {
				uni.navigateTo({
					url: "../qgt/qgt"
				})
			},
			go2() {
				uni.navigateTo({
					url: "../bl/bl"
				})

			},
			go3() {
				uni.navigateTo({
					url: "../xuexi/xuexi"
				})
			},
			go4() {
				uni.navigateTo({
					url: "../dst/dst"
				})
			},
			go5() {
				uni.navigateTo({
					url: "../dt/dt"
				})
			}

		}
	}
</script>

<style>

</style>
